3.3.<template>
  <div>

        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
          <el-breadcrumb-item style="font-size: 35px">添加就诊人页面</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/personal/client' }" style="font-size: 35px">返回</el-breadcrumb-item>
        </el-breadcrumb>

    <el-divider></el-divider>

    <el-form :model="ruleForm" :rules="userInfoRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="姓名" prop="name" >
        <el-input v-model="ruleForm.name" style="width: 300px;text-align: left;display: flex" :maxlength="8" @input="validateInputUser"></el-input>
      </el-form-item>

      <el-form-item label="身份证号" prop="icon" :error="hasShowErrorCardId">
        <el-input v-model="ruleForm.number" style="width: 300px;text-align: left;display: flex" @input="validateIdCard"></el-input>
      </el-form-item>

      <el-form-item label="联系方式" prop="keywords" :error="hasShowErrorPhone">
        <el-input v-model="ruleForm.phone" style="width: 300px;text-align: left;display: flex" :maxlength="11" @input="validateInputNum"></el-input>
      </el-form-item>

<!--
      <el-form-item label="性别" prop="sort">
        <el-input v-model="ruleForm.gender" style="width: 300px;text-align: left;display: flex"></el-input>
      </el-form-item>
-->
      <el-form-item label="性别:">
        <el-select v-model="ruleForm.gender" placeholder="请选择性别" style="width:300px;float: left">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="基础病" prop="sort">
        <el-input v-model="ruleForm.background_disease" style="width: 300px;text-align: left;display: flex" :maxlength="20"></el-input>
      </el-form-item>

      <el-form-item label="紧急联系人" prop="sort" :error="hasShowErrorPhone2">
        <el-input v-model="ruleForm.emergency_contact_phone" style="width: 300px;text-align: left;display: flex" :maxlength="11" @input="validateInputNum2"></el-input>
      </el-form-item>



<!--      <div class="block">-->
<!--        <span class="demonstration">出生年月</span>-->
        <el-form-item label="出生年月">
        <el-date-picker
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            v-model="ruleForm.birth"
            type="date"
            placeholder="选择日期" style="width: 300px;text-align: left;display: flex">
        </el-date-picker>
        </el-form-item>
<!--      </div>-->

      <el-form-item label="省份" >
      <el-select v-model="ruleForm.province" placeholder="请选择" style="width: 300px;text-align: left;display: flex" @change="address1(ruleForm.province)">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.name">
        </el-option>
      </el-select>
      </el-form-item>

      <el-form-item label="市" >
      <el-select v-model="ruleForm.city" placeholder="请选择"  style="width: 300px;text-align: left;display: flex" @change="address2(ruleForm.city)">
        <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.name"
            :value="item.name">
        </el-option>
      </el-select>
      </el-form-item>

        <el-form-item label="区" >
      <el-select v-model="ruleForm.area" placeholder="请选择" style="width: 300px;text-align: left;display: flex">
        <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.name"
            :value="item.name" >
        </el-option>
      </el-select>
        </el-form-item>

      <el-form-item label="详细地址" prop="sort">
        <el-input v-model="ruleForm.detail" style="width: 300px;text-align: left;display: flex" :maxlength="50" ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="success" style="text-align: center;display: flex;"
                   @click="submitForm('ruleForm')" >保存信息</el-button>
      </el-form-item>




    </el-form>
  </div>

  <!--    不用footer 可直接在HomeView中修改引用-->
</template>

<script>
import TokenAxios from "@/http/TokenAxios";
import BaseUrl from "@/http/BaseUrl";
import axios from "axios";

export default {
  data(){
    return {
      options2: [{
        }
      ],
      label2: '',
      options1: [{

      }],
      label1: '',
      options: [{
        // id: '选项1',
        // name: '河北省'
      }],
      label: '',
      loginInfo:[],
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm: {

      },
      hasShowErrorCardId :false,
      hasShowErrorPhone:false,
      hasShowErrorEmail:false,
      hasShowErrorPhone2:false,
    }
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      if (Array.isArray(this.ruleForm.parentId)) {
        this.ruleForm.parentId = this.ruleForm.parentId.pop();
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = BaseUrl.INFORMATIOON+'/patients/insert';
          console.log('url = ' + url);
          debugger
          TokenAxios.post(url, this.ruleForm).then((response) => {
            let jsonResult = response.data;
            debugger
            if (jsonResult.state == 20000) {
              debugger
              this.$message({
                message: '添加就诊人成功！',
                type: 'success'
              });
              this.$router.push("/personal/client")
            }
          });
        }
      });
    },
    validateInputUser() {
      const regex = /^[^\s!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]+$/;
      if (!regex.test(this.ruleForm.name)) {
        this.ruleForm.name = this.ruleForm.name.replace(/[^\w\s]/gi, '');
      }
    },
    validateIdCard() {
      const regex = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
      if (!regex.test(this.ruleForm.number)) {
        this.hasShowErrorCardId = "身份证格式错误";
      }else {
        this.hasShowErrorCardId = false;
      }
    },
    validateInputNum() {
      const regex = /^\d{11}$/;
      if (!regex.test(this.ruleForm.phone)) {
        // this.ruleForm.name = this.ruleForm.name.replace(/[^\d]/g, '');
        this.hasShowErrorPhone = "电话号码格式错误"
      }else {
        this.hasShowErrorPhone = false;
      }
    },
    validateInputNum2() {
      const regex = /^\d{11}$/;
      if (!regex.test(this.ruleForm.emergency_contact_phone)) {
        // this.ruleForm.name = this.ruleForm.name.replace(/[^\d]/g, '');
        this.hasShowErrorPhone2 = "电话号码格式错误"
      }else {
        this.hasShowErrorPhone2 = false;
      }
    },
    address(){
      this.ruleForm.city=''
      axios.get(BaseUrl.ADDRESS+'/dict/district/list-by-parent?parentId='+0).then((response)=>{
        let jsonResult = response.data;
        // debugger
        if (jsonResult.state == 20000) {
          // debugger
          console.log(jsonResult.data)
          jsonResult.data.forEach(item=>{
            this.options.push(item)
            this.options.value=this.options.id
            this.options.label=this.options.name
          })
          console.log(this.options)
          // debugger
        }
      })
    },
    address1(province){
      const parentId=this.options.find(item =>item.name === province)?.id;
      // debugger
      axios.get(BaseUrl.ADDRESS+'/dict/district/list-by-parent?parentId='+parentId).then((response)=>{
        // debugger
        this.options1=[]
        let jsonResult = response.data;
        // debugger
        if (jsonResult.state == 20000) {
          // debugger
          console.log(jsonResult.data)
          jsonResult.data.forEach(item=>{
            // this.options.value.push(item.id)
            // this.options.label.push(item.name)4
            this.options1.push(item)
            this.options1.value=this.options1.id
            this.options1.label=this.options1.name
            // this.ruleForm.city=this.options1[0].name
            this.ruleForm.city=this.placeholder="请选择"
          })
          console.log(this.options1)
          // debugger
        }
      })

    },
    address2(city){
      const parentId=this.options1.find(item =>item.name === city)?.id;
      // debugger
      axios.get(BaseUrl.ADDRESS+'/dict/district/list-by-parent?parentId='+parentId).then((response)=>{
        this.options2=[]
        // debugger
        let jsonResult = response.data;
        // debugger
        if (jsonResult.state == 20000) {
          // debugger
          console.log(jsonResult.data)
          jsonResult.data.forEach(item=>{
            // this.options.value.push(item.id)
            // this.options.label.push(item.name)
            this.options2.push(item)
            this.options2.value=this.options2.id
            this.options2.label=this.options2.name
            // this.ruleForm.area=this.options2[0].name
            this.ruleForm.area=this.placeholder="请选择"
          })
          console.log(this.options2)
          // debugger
        }
      })
    }
  },
  created() {


  },
  mounted() {
    this.address();
  },
/*  watch: {
    'ruleForm.province': function (newValue, oldValue) {
      // 当选择的省份发生变化时触发
      if (newValue !== oldValue) {
        this.ruleForm.city = ''; // 重置市
        this.ruleForm.area = ''; // 重置区
      }
    },
    deep: true, // 深度监听
    immediate: true  // 第一次改变就执行
  },*/
}
</script>
<style>
body{
  background-color: rgb(241,242,243);
}
</style>




